@import '~theme/helpers';

.todo {
  .mdl-card {
    height: auto;
  }

  .mdl-card__supporting-text {
    width: 100%;
    padding: 0;
    min-height: 70px;

    .mdl-list__item {
      align-items: flex-start;
      padding-bottom: 0;

      .mdl-list__item-primary-content {
        max-width: 100%;
        word-wrap: break-word;
      }

      .material-icons {
        visibility: hidden;
      }

      &:hover .material-icons {
        visibility: visible;
      }
    }

    .mdl-checkbox {
      height: auto;
      padding-left: $checkbox-button-size*2;
    }

    .mdl-textfield {
      width: 100%;
      padding: 0;
    }

    .mdl-textfield__input {
      padding: 2px 0;
    }

    .mdl-textfield__label {
      color: $todo-input-text-label-color;
      top: 0;

      &::after {
        background-color: $todo-input-text-highlight-color;
        bottom: 0;
      }
    }
  }

  .mdl-card__actions {
    padding: 8px 16px;
    margin-top: 20px;
    background: $card-actions-background-color;
  }
}
